<template>
	<div class="mainDiv" ref='mainDiv'>
		<div class="headerWrap">
			<top></top>
		</div>
		<div class="contentWrap">
			<div class="conLeft">
				<div class="inOutgailvWrap">
					<inOutgailv></inOutgailv>
				</div>
				<!-- <div class="inOutdiquWrap">
					<inOutdiqu></inOutdiqu>
				</div> -->
				<div class="inOutjianguanWrap">
					<inOutjianguan></inOutjianguan>
				</div>
				<div class="inOutyunshuWrap">
					<inOutyunshu></inOutyunshu>
				</div>
				<div class="shangpingpinlieWrap">
					<shangpingpinlie></shangpingpinlie>
				</div>
			</div>
			<div class="conCenter">
				<div class="mapCon">
					<!-- 地图上面的数据start -->
					<dayhuozhiAngdanliang></dayhuozhiAngdanliang>
					<!-- 地图上面的数据end -->
					<div class="chinaMapWrap" v-if="isShowChinaMap">
						<chinaMap></chinaMap>
					</div>
					<div class="worldMapWrap" v-if="!isShowChinaMap">
						<worldMap></worldMap>
					</div>
				</div>
				<div class="inshangpindiAndoutshangpinmudi">
					<div class="inshangpindiWrap">
						<provincePaiming v-if="isShowChinaMap"></provincePaiming>
						<inshangpindi v-if="!isShowChinaMap"></inshangpindi>
					</div>
					<div class="outshangpinmudiWrap">
						<cityPaiming v-if="isShowChinaMap"></cityPaiming>
						<outshangpinmudi v-if="!isShowChinaMap"></outshangpinmudi>
					</div>
				</div>
			</div>
			<div class="conRight">
				<div class="inOutyewuhuozhiWrap">
					<inOutyewuhuozhi></inOutyewuhuozhi>
				</div>
				<div class="inOutyewuyearWrap">
					<inOutyewuyear></inOutyewuyear>
				</div>
				<div class="inOutyewumonthWrap">
					<inOutyewumonth></inOutyewumonth>
				</div>
				<div class="danpiaojunjiamonthWrap">
					<danpiaojunjiamonth></danpiaojunjiamonth>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import top from '@/components/children/top';
	// left
	import inOutgailv from '@/components/children/left/inOutgailv';
	import inOutdiqu from '@/components/children/left/inOutdiqu';
	import inOutjianguan from '@/components/children/left/inOutjianguan';
	import inOutyunshu from '@/components/children/left/inOutyunshu';
	import shangpingpinlie from '@/components/children/left/shangpingpinlie';

	// center
	import chinaMap from '@/components/children/center/chinaMap';
	import worldMap from '@/components/children/center/worldMap';
	
	//世界地图下面的数据
	import inshangpindi from '@/components/children/center/inshangpindi';
	import outshangpinmudi from '@/components/children/center/outshangpinmudi';
	//中国地图下面的数据
	import provincePaiming from '@/components/children/center/provincePaiming';
	import cityPaiming from '@/components/children/center/cityPaiming';
	// center 滚动 
	import dayhuozhiAngdanliang from '@/components/children/center/dayhuozhiAngdanliang';
	
	// right
	import inOutyewuhuozhi from '@/components/children/right/inOutyewuhuozhi';
	import inOutyewuyear from '@/components/children/right/inOutyewuyear';
	import inOutyewumonth from '@/components/children/right/inOutyewumonth';
	import danpiaojunjiamonth from '@/components/children/right/danpiaojunjiamonth';

	export default {
		name: 'screenIndex',
		components: {
			top,
			// left
			inOutgailv,
			inOutdiqu,
			inOutjianguan,
			inOutyunshu,
			shangpingpinlie,
			// center
			chinaMap,
			worldMap,
			inshangpindi,
			outshangpinmudi,
			provincePaiming,
			cityPaiming,
			//滚动
			dayhuozhiAngdanliang,
			// right
			inOutyewuhuozhi,
			inOutyewuyear,
			inOutyewumonth,
			danpiaojunjiamonth
		},
		data() {
			return {
				isShowChinaMap:false,
			}
		},
		created() {
			
		},
		mounted() {
			var that = this;
			setInterval(function(){
				that.isShowChinaMap = !that.isShowChinaMap;
				// console.log(that.isShowChinaMap)
			},30000)
		},
		methods: {
			
			
		}
	}
</script>

<style scoped>
	.mainDiv {
		height: 100vh;
		width: 100vw;
		margin: 0 auto;
		min-width: 19.2rem;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background: url(../../static/img/mengban.png) no-repeat center center;
		background-size: 100% 100%;
	}

	.headerWrap {
		height: 1.2rem;
		width: 100vw;
		margin-top: .5rem;
	}

	.contentWrap {
		flex: 1;
		width: 100vw;
		letter-spacing: 1px;
		margin-right: .1rem;
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
		margin-top: -.3rem;
		padding: 0 0 .2rem .3rem;
	}

	.conLeft,
	.conRight {
		width: 25%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.conCenter {
		width: 47%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.inOutgailvWrap,
	.inOutdiquWrap,
	.inOutjianguanWrap,
	.inOutyunshuWrap,
	.inOutyewuhuozhiWrap,
	.inOutyewuyearWrap,
	.inOutyewumonthWrap,
	.shangpingpinlieWrap,
	.danpiaojunjiamonthWrap {
		width: 100%;
		height: 24.5%;
	}

	.mapCon {
		width: 100%;
		height: 75%;
		position: relative;
	}
	.chinaMapWrap{
		width: 100%;
		height: 100%;
	}
	.worldMapWrap{
		width: 100%;
		height: 100%;
		/* background-color: #00FFFF; */
	}

	.inshangpindiAndoutshangpinmudi {
		width: 100%;
		height: 24.5%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.inshangpindiWrap {
		width: 49%;
		height: 100%;
	}

	.outshangpinmudiWrap {
		width: 49%;
		height: 100%;
	}
</style>
